<script lang="ts">
/**
 * @author leo
 * @description #19549 分组选择器
 *
 * @param refresh - 刷新
 * @param query{} - 提交新传的参数 默认空对象
 * @param 参考element-api  http://element-cn.eleme.io/#/zh-CN/component/select
 *
 * @event on-mounted - 列表加载完 返回值：[{id,name}]
 */
import { Component, Vue, Prop, Watch, Mixins } from "vue-property-decorator";
import { Action, namespace } from "vuex-class";
import SelectMix from "@/views/mixins/SelectMix.ts";

import { getApiAssetsGroup } from "@/model";

@Component
export default class GroupSelect extends Mixins(SelectMix) {
  @Prop({ default: "" }) public value!: string | number | string[] | number[];
  @Prop({
    default() {
      return {};
    }
  })
  public query!: any;
  @Prop({ default: false }) public multiple!: boolean; // 多选

  public options: any = [];
  public value2: any = this.value;

  @Watch("value")
  public changeValue(val: any) {
    this.value2 = val;
  }

  get getValue() {
    return this.options.length > 0 ? this.value2 : this.multiple ? [] : "";
  }

  public async onRefresh() {
    const data = await getApiAssetsGroup({ ...this.query });

    this.options = data;
    this.$emit("on-mounted", this.options);
  }

  public async mounted() {
    this.onRefresh();
  }
}
</script>
<template>
  <el-select
    :value="getValue"
    v-bind="$attrs"
    :filterable="filterable"
    @change="(val)=>change('value',val)"
    :multiple="multiple"
  >
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>